<template>
  <div style="height:6vh;padding: 10px 20px;background-color: #fff">
    <span style="line-height: 60px;font-size: 20px">部门管理</span>
    <el-button style="float: right;margin-top: 10px;"
               @click="addDept()"
               type="primary">添加菜单
    </el-button>
  </div>

  <div>
    <el-table
        :data="deptList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
    >
      <el-table-column prop="deptName" label="部门名称"/>
      <el-table-column prop="leaderName" label="部门负责人"/>
      <el-table-column prop="sortNo" label="排序"/>
      <el-table-column prop="createDay" label="创建日期"/>
      <el-table-column label="部门状态" prop="dataState" align="center">
        <template #default="scoped">
          <el-switch :active-value="'0'" @change="()=>changeStatus(scoped.row)" :inactive-value="'1'"
                     v-model="scoped.row.dataState"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="部门说明">
        <template #default="{row}">
          {{ row.reamrk?.reamrk || '——' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button size="small" type="primary"  @click="addSubDept(row.parenetDeptNo)">添加子级菜单</el-button>
          <el-button size="small"  type="primary" @click="saveDept(row)">编辑</el-button>
          <el-button size="small" type="danger"  @click="deleteDept(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import {getTreeList} from "@/api/system/SysDeptApi.js";
const deptList = ref([]);
const addDept =()=>{

}
const addSubDept = (no)=>{}
const saveDept = (row)=>{

}
const fetchData =async ()=>{
  const depts = await getTreeList();
  deptList.value = depts;

}
const changeStatus = row=>{}
const deleteDept = id=>{}

onMounted(()=>{
   fetchData()
})
</script>